import { BorderBox12, BorderBox13 } from '@jiaminghi/data-view-react'
import styled from 'styled-components'
import { CommonTitle } from '../Title'
import { useEffect, useState } from 'react'
import { LeftPageDataType } from '@/api/data/leftPageData'
import { get } from '@/api/http'
import { leftPageDataApi } from '@/api/data'
import { ResultEnum } from '@/enums/httpEnum'
import { TrafficSituation } from './echarts/TrafficSituation'
import { UserSituation } from './echarts/UserSituation'

const LeftContainer = styled.div`
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-rows: 1.2fr 2fr;
	gap: 20px;
`

export const Left = () => {
	const [leftData, setLeftData] = useState<LeftPageDataType>()

	const fetchData = async () => {
		const { code, data } = await get(leftPageDataApi)
		if (code === ResultEnum.SUCCESS) {
			setLeftData(data)
		}
	}

	useEffect(() => {
		fetchData()
	}, [])

	return leftData ? (
		<LeftContainer>
			<BorderBox12 className="p-[15px]!">
				<div className="w-full h-full flex flex-col rounded-[10px] bg-[#13192f99]">
					<CommonTitle title="今日流量态势" />
					<div className="mt-[15px] flex justify-around items-center text-base text-[#c0c9d2]">
						<span>
							平均接纳次数(小时):
							<span className="pl-2.5 text-[#47dae8]">1500次</span>
						</span>
						<span>
							流量峰值:
							<span className="pl-2.5 text-[#47dae8]">300M</span>
						</span>
					</div>
					<TrafficSituation trafficStatus={leftData.trafficStatus} />
				</div>
			</BorderBox12>
			<BorderBox13 className="p-[15px]!">
				<div className="w-full h-full flex flex-col rounded-[10px] bg-[#13192f99]">
					<CommonTitle title="用户数据状态" />
					<UserSituation userStatus={leftData.userStatus} />
				</div>
			</BorderBox13>
		</LeftContainer>
	) : (
		'loading...'
	)
}
